<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	
	<!-- jQuery  -->
    <script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui  -->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- layui-soul-table -->
	<link rel="stylesheet" href="/static/plugins/layui/extends/soulTable/css/soulTable.css" media="all"/>
	
	</head>
	<body>
		<form class="layui-form" id="id_form" method="post" action="/api/inter/ysGridButton/resort">
			
			<table id="id_dragTable"></table>
			<script th:inline="javascript">
			// 自定义模块
			layui.config({
					base: '/static/plugins/layui/extends/soulTable/js/'   // 模块目录
				}).extend({
				soulTable: 'soulTable'
			});
			layui.use(['form', 'table', 'soulTable'], function() {
				
				var $ = layui.$,
					table = layui.table,
			        soulTable = layui.soulTable,
					form = layui.form;
				
				table.render({
					elem: '#id_dragTable',
					width: 500,
					height: 800,
					limit: 9999,
					id: 'id_dragTable',
					rowDrag: {
						done: function(obj) {}
					},
					totalRow: true,
					cols: [ [
						{field: 'guid', title: '按钮ID', align:'center'},
						{field: 'name', title: '按钮名称', align:'center'}
					] ],
					data: $.parseJSON(JSON.stringify([[${dto.rows}]])),
					done: function(res, curr, count){
						soulTable.render(this);
					}
				});
			});
			</script>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"></fieldset>
			<div class="layui-form-item">
				<div class="layui-col-md1 layui-col-md-offset11">
					<div class="layui-btn-container">
						<button type="button" class="layui-btn" lay-submit lay-filter="formSubmit">保存</button>
					</div>
				</div>
			</div>
		</div>
	</form>
	<script>
	$(function () {
		layui.use(['form'], function(){
			var form = layui.form;
			
			// 表单提交，共用同一个
			form.on('submit(formSubmit)', function(data){
				var indexOfLoading = layer.load(1, {
					shade: [0.5,'#000000'] //0.1透明度的白色背景
				});
				data.field['rows'] = JSON.stringify(layui.table.cache["id_dragTable"]);
				$.post(data.form.action, data.field, function(res){
					if (res.code == 0) {
						layer.msg(res.msg);
						setTimeout(function(){
							window.parent.location.reload();
						}, 1000);
					} else {
						layer.close(indexOfLoading);
						layer.msg(res.msg);
					}
				});
				return false;
			});
		});
	});
	</script>
</body>

</html>